<template>
  <div class="title-block-setting setting">
    <template v-if="tabType == 'data'">
      <div class="card">
        <div class="title">选择风格 <div class="tip">建议尺寸：750*80</div> </div>
        <div class="content">
          <el-form-item label="标题样式">
            <el-button @click="selectStyle">选择样式</el-button>
          </el-form-item>
          <el-form-item label="背景图片">
            <!-- TODO: 选择图片 -->
            <sa-image :url="settingData.data.src" @click="selectImage"></sa-image>
          </el-form-item>
        </div>
      </div>
      <div class="card">
        <div class="title">显示设置</div>
        <div class="content">
          <el-form-item label="位置">
            <el-radio-group v-model="settingData.data.location">
              <el-radio label="left">居左</el-radio>
              <el-radio label="center">居中</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="偏移">
            <el-input-number v-model="settingData.data.skew" />
          </el-form-item>
        </div>
      </div>
      <div class="card">
        <div class="title">标题设置</div>
        <div class="content">
          <el-form-item label="文字">
            <dc-text-color
              v-model="settingData.data.title"
              placeholder="请输入文字"
            ></dc-text-color>
          </el-form-item>
          <el-form-item label="字号">
            <dc-slider v-model="settingData.data.title.textFontSize"></dc-slider>
          </el-form-item>
          <el-form-item label="其他">
            <el-checkbox-group v-model="settingData.data.title.other">
              <el-checkbox label="bold">加粗</el-checkbox>
              <el-checkbox label="italic">倾斜</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
      </div>
      <div class="card">
        <div class="title">副标题设置</div>
        <el-form-item label="文字">
          <dc-text-color
            v-model="settingData.data.subtitle"
            placeholder="请输入文字"
          ></dc-text-color>
        </el-form-item>
        <el-form-item label="字号">
          <dc-slider v-model="settingData.data.subtitle.textFontSize"></dc-slider>
        </el-form-item>
        <el-form-item label="其他">
          <el-checkbox-group v-model="settingData.data.subtitle.other">
            <el-checkbox label="bold">加粗</el-checkbox>
            <el-checkbox label="italic">倾斜</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <div class="card">
        <div class="title">更多设置</div>
        <div class="content">
          <el-form-item label="显示更多">
            <el-radio-group v-model="settingData.data.more.show">
              <el-radio :label="0">不显示</el-radio>
              <el-radio :label="1">显示</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="settingData.data.more.show" label="链接">
            <dc-url v-model="settingData.data.more.url"></dc-url>
          </el-form-item>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
  import { useModal } from '@/sheep/hooks';
  import { useFile } from '@/sheep/components/sa-file/sa-file-modal.vue';

  import dcColorPicker from '../../common/dc-color-picker.vue';
  import dcSlider from '../../common/dc-slider.vue';
  import dcUrl from '../../common/dc-url.vue';
  import dcTextColor from '../../common/dc-text-color.vue';
  import TitleBlockSelect from './select.vue';
  const props = defineProps(['settingData', 'tabType']);

  function selectStyle() {
    useModal(
      TitleBlockSelect,
      {
        title: '风格选择',
        src: props.settingData.data.src,
      },
      {
        confirm: (res) => {
          props.settingData.data.src = res.data.src;
          for (var key in props.settingData.data) {
            props.settingData.data[key] = res.data[key];
          }
        },
      },
    );
  }
  function selectImage() {
    useFile(
      {
        fileType: 'image',
      },
      {
        confirm: (data) => {
          props.settingData.data.src = data.url;
        },
      },
    );
  }
</script>

<style lang="scss" scoped>
  .title-block-setting {
    .sa-image {
      width: 100%;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid var(--sa-border);
    }
  }
</style>
